<html> 
    <head>
        <style>
            #div1{
                background-color: aqua;
                height: 200px;
                width: 200px;
            }
        </style>
        <script src="jquery-3.3.1.js"></script>
        <script>
        $(function() {
            $("#hiddenBtn").click(function () {
            $("#div1").hide(2000,"linear",function (){
                alert(1);
            });
     
            })
            $("#showBtn").click(function (){
                $("#div1").show(2000,"linear",function btm1(){
                    alert(2);
                })

            })

                     var ball =  $("ul li");
                     $.each(ball,function() {
                        console.log($(this).html());
                        console.log(this.innerHTML)
                     });
                     for(li of ball) {
                         console.log($(ball).html());
                     }
        })
        </script> 
    </head>
    <body>
        <input type="button" value="隐藏" id="hiddenBtn">
        <input type="button" value="展示" id="showBtn">
            <div>
                <ul id="ball">
                <li>足球</li>
                <li>网球</li>
                <li class="basketball">篮球</li>
            </ul>
            </div>
    </body>
    <div id="div1"></div>
</html>